;;;

var details = document.querySelector('.details')
console.log(details);

details.innerHTML = `
<p  class="mc">
<span  style="background-color: #80c4ae;cursor: pointer;">目录</span>
<span  style="cursor: pointer;">讨论</span>
</p>

<div class="mulu">
          <div class="mulu1">
              <h3>第一章公开课（含4期）</h3>
              <ul>
          <li>
              <span>第0节：化学的研究对象和研究方法</span>
              <img src="../img1/index/left.png" alt="">
          </li>
          <li>
              <span>第1节：离子反应</span>
              <img src="../img1/index/left.png" alt="">
          </li>
          <li>
              <span>第2节：氧化还原反应</span>
              <img src="../img1/index/left.png" alt="">
          </li>
          <li>
              <span> 第3节：钠及其化合物</span>
              <img src="../img1/index/left.png" alt="">
          </li>
              </ul>
          </div>





          <div class="mulu1">
          <h3>第一章公开课（含4期）</h3>
          <ul><li>
          <span>第0节：化学的研究对象和研究方法</span>
          <img src="../img1/index/left.png" alt="">
      </li>
      <li>
          <span>第1节：离子反应</span>
          <img src="../img1/index/left.png" alt="">
      </li>
      <li>
          <span>第2节：氧化还原反应</span>
          <img src="../img1/index/left.png" alt="">
      </li>
      <li>
          <span> 第3节：钠及其化合物</span>
          <img src="../img1/index/left.png" alt="">
      </li>
          </ul>
      </div>
      <div class="mulu1">
      <h3>第一章公开课（含4期）</h3>
      <ul><li>
      <span>第0节：化学的研究对象和研究方法</span>
      <img src="../img1/index/left.png" alt="">
  </li>
  <li>
      <span>第1节：离子反应</span>
      <img src="../img1/index/left.png" alt="">
  </li>
  <li>
      <span>第2节：氧化还原反应</span>
      <img src="../img1/index/left.png" alt="">
  </li>
  <li>
      <span> 第3节：钠及其化合物</span>
      <img src="../img1/index/left.png" alt="">
  </li>
      </ul>
  </div>
  <div class="mulu1">
  <h3>第一章公开课（含4期）</h3>
  <ul><li>
  <span>第0节：化学的研究对象和研究方法</span>
  <img src="../img1/index/left.png" alt="">
</li>
<li>
  <span>第1节：离子反应</span>
  <img src="../img1/index/left.png" alt="">
</li>
<li>
  <span>第2节：氧化还原反应</span>
  <img src="../img1/index/left.png" alt="">
</li>
<li>
  <span> 第3节：钠及其化合物</span>
  <img src="../img1/index/left.png" alt="">
</li>
  </ul>
</div>
<div class="mulu1">
<h3>第一章公开课（含4期）</h3>
<ul><li>
<span>第0节：化学的研究对象和研究方法</span>
<img src="../img1/index/left.png" alt="">
</li>
<li>
<span>第1节：离子反应</span>
<img src="../img1/index/left.png" alt="">
</li>
<li>
<span>第2节：氧化还原反应</span>
<img src="../img1/index/left.png" alt="">
</li>
<li>
<span> 第3节：钠及其化合物</span>
<img src="../img1/index/left.png" alt="">
</li>
</ul>
</div>
<div class="mulu1">
<h3>第一章公开课（含4期）</h3>
<ul><li>
<span>第0节：化学的研究对象和研究方法</span>
<img src="../img1/index/left.png" alt="">
</li>
<li>
<span>第1节：离子反应</span>
<img src="../img1/index/left.png" alt="">
</li>
<li>
<span>第2节：氧化还原反应</span>
<img src="../img1/index/left.png" alt="">
</li>
<li>
<span> 第3节：钠及其化合物</span>
<img src="../img1/index/left.png" alt="">
</li>
</ul>
</div>


</div>
<div class="speak">
<textarea name="" id="" cols="30" rows="10"></textarea>
<ul class="chat">
    
</ul>
</div>
`
var speak =document.querySelector('.speak')
console.log(speak);
 var mulu =document.querySelector('.mulu')
 console.log(mulu);
// 目录和讨论的切换
var span =document.querySelectorAll('.details p span')
console.log(span);
span[0].onclick=function(){
    this.style.backgroundColor='#80c4ae'
    span[1].style.backgroundColor=''
    mulu.style.display='block'
    speak.style.display='none'
}
span[1].onclick=function(){
    this.style.backgroundColor='#80c4ae'
    span[0].style.backgroundColor=''
    mulu.style.display='none'
    speak.style.display='block'
}



//目录鼠标划上效果
// 获取li
// var oli =document.querySelectorAll('.mulu .mulu1 li')
// console.log(oli);
// for (var i = 0; i < oli.length; i++) {
//     oli[i].index = i
    
//      oli[i].onmouseover = function () {
       
//          for (var k = 0; k < oli.length; k++) {
    
//              oli[k].className = ''
          
//          }
//          this.className = 'active'
        
//      }
//      // 鼠标离开列表时(开始播放消失)
//      oli[i].onmouseout = function () {
//          for (var k = 0; k < oli.length; k++) {
//              oli[k].className = ''         
//          } 
//      }
//  }


//  讨论区域
// 输入框
var text =document.querySelector('textarea')
console.log(text.innerHTML);
// 讨论区
var chat =document.querySelector('.chat')
console.log(chat);
// 输入区
var content =document.querySelector('.content')
console.log(content);
// 头像名字
var tn =document.querySelector('.tn')
console.log(tn);

document.onkeyup=function(e){
    var ev = window.event||e
   
   if(ev.key=='Enter'){
    //聊天时最新消息在最上边
    
    chat.innerHTML=`
    <li class="chatli">
    <div class="tn">
        <img src="../img1/login/user.png" alt="">
        <span class="name">威海百夫长</span>
    </div>
    <p class="content">
     ${text.value}
     
    
    </p>
 </li>
    `+chat.innerHTML

    text.value=''
    
   }
}

// 每一条内容
